<template lang="html">

  <div class="qrcode">
    <Header>
      <mu-icon value="arrow_back" slot="left" @touchend="back"></mu-icon>
      <span slot="title">邀请用户注册</span>
    </Header>
    <div class="qrcode-box">
      <p>您的邀请二维码</p>
      <p><img src="../../public/img/images/ia_200006608.png"></p>
      <div class="btns">
        <a tabindex="0" class="mu-button first mu-raised-button mu-primary-color mu-inverse" style="user-select: none; outline: none; -webkit-appearance: none;" @click="qrcode">保存二维码到手机</a>
        <mu-button color="primary" id="btn" data-clipboard-text="组长真帅" @click="copy">复制分享链接地址</mu-button>
      </div>
    </div>
  </div>

</template>

<script lang="js">
  // 引入header
  import Header from '@/components/Header';

  export default  {
    name: 'qrcode',
    props: [],
    // 数据在页面中显示后
    mounted () {
      this.copyBtn = new this.clipboard('#btn');
    },
    data () {
      return {
        copyData: '组长最帅',
        copyBtn: null,
      }
    },
    methods: {
      // 后退
      back() {
        this.$router.go(-1);
      },
      // 复制
      copy() {
        let _this = this;
        let clipboard = _this.copyBtn;
        clipboard.on('success', function() {
          _this.$toast.success('复制成功')
        });
        clipboard.on('error', function() {
            _this.$toast.error('复制失败，请重试')
        });
      },
      // 保存二维码
      qrcode() {
        window.location.href = 'http://api.guojintz.com/qrcode/17600755396.png'
      }
    },
    // 计算属性数据
    computed: {

    },
    // 注册组件
    components: { Header },
}


</script>

<style scoped lang="scss">
  .qrcode {
    position: relative;
    .header {
      position: relative;
      .mu-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      span {
        display: block;
        text-align: center;
      }
    }
    .qrcode-box {
      text-align: center;
      position: relative;
      left: 0;
      top: 50px;
      p {
        img {
          width: 220px;
        }
      }
      .btns {
        a {
          margin-right: 20px;
          position: relative;
          top: 13px;
          padding: 0 10px;
        }
      }
    }
    .mu-alert {
      z-index: 1000;
      position: absolute;
      top: 0;
    }
  }
</style>
